<template>
  <div v-if="recommend.length!==0">
    <!-- <h3>商家推荐</h3> -->
    <swiper class="swiper" :options="swiperOption">
      <swiper-slide v-for="(item,index) in recommend[0].items" :key="index">
        <div class="item">
          <img :src="item.image_path" alt />
          <div>
            <h4 class="title">{{item.name}}</h4>
            <div class="month_sales">月售：{{item.month_sales}} 单</div>
            <div class="satisfy_rate">好评率：{{item.satisfy_rate}}</div>
          </div>
          <div class="price_watp">
            <span class="price">¥{{item.specfoods[0].price}}</span>
            <cart-controll :food='item'/>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import CartControll from './CartControll'
import "swiper/css/swiper.css";

export default {
  components: {
    Swiper,
    SwiperSlide,
    CartControll
  },
  props: {
    recommend: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 10,
        freeMode: true
      }
    };
  }
};
</script>

<style scoped>
.swiper-wrapper {
  touch-action: none !important;
}
img{
  width:120px;
  height:120px;
}
.title{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 13px;
  font-weight: normal;
  line-height: 20px;
}
.month_sales,.satisfy_rate{
  font-size: 12px;
  color: #aaa;
  line-height: 18px;
}
.price_watp{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.price{
  font-size: 16px;
  color: #ff5339;
}

</style>